<template>
  <div>
    <template v-if="isPageError">
      <div class="empty-wrap">
        <a-empty :description="description" />
      </div>
    </template>
    <template v-else>
      <component :is="loadedComponent" ref="loadRef" @init="loadInit" @ok="ok" @cancel="cancel"></component>
    </template>
  </div>
</template>

<script>
export default {
  computed: {
    isPageError() {
      const error = this.error;
      return error;
    }
  },
  data() {
    return {
      error: false,
      description: "",
      loadedComponent: null,
    };
  },
  methods: {
    init(option) {
      if (option.pageUrl) {
        this.loadPath(option.pageUrl);
      } else {
        this.error = true;
        this.description = "页面参数错误无法正确显示";
      }
    },
    loadPath(path) {
      try {
        this.loadedComponent = (resolve) => require([`@/pages${path}`], resolve);
      } catch (error) {
        this.error = true;
        this.description = error.message || "页面地址错误无法正确显示";
      }
    },
    ok() {
      this.$emit("ok");
    },
    cancel() {
      this.$emit("cancel");
    },
    loadInit() {
      this.$emit("init");
    }
  },
};
</script>

<style lang="scss" scoped></style>